<template>
    <div class="manageAddressContainer">
        <el-table :data="address" ref="addressRef" v-loading="isLoading" element-loading-text="数据加载中..." empty-text="啥也没有呢">
            <el-table-column type="index"></el-table-column>
            <el-table-column prop="name" label="收货人姓名" width="100"></el-table-column>
            <el-table-column prop="telephone" label="手机号码" width="130"></el-table-column>
            <el-table-column prop="region" label="所在地区" width="160"></el-table-column>
            <el-table-column prop="detail" label="详细地址"></el-table-column>
            <el-table-column label="操作" width="140">
                <template #default="scope">
                    <el-button type="primary" size="small" @click="updateHandler(scope.row)">修改</el-button>
                    <el-button type="danger" size="small" @click="deleteHandler(scope.row)">删除</el-button>
                </template>
            </el-table-column>
            <el-table-column prop="status" label="默认地址" width="120">
                <template #default="scope">
                    <el-tag v-if="scope.row.status === 1" type="danger" size="large" style="margin-left: 10px"
                        >默认地址</el-tag
                    >
                    <el-button type="text" size="small" v-else @click="setDefault(scope.row)">设为默认地址</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-drawer v-model="isDrawer" title="修改地址" size="45rem" @handleClose="closeHandler">
            <AddressForm :updateForm="updateForm" :isUpdate="true" @close="closeHandler" />
        </el-drawer>
    </div>
</template>

<script>
import service from "@/utils/request";
import { ElMessage, ElMessageBox } from "element-plus";
import AddressForm from "./AddressForm.vue";
import store from "@/store";

export default {
    name: "ManageAddress",
    components: {
        AddressForm,
    },
    data() {
        return {
            address: [],
            isLoading: true,
            isDrawer: false,
            updateForm: {
                addressID: 0,
                region: [],
                code: "",
                detail: "",
                name: "",
                telephone: "",
            },
        };
    },
    methods: {
        async refresh() {
            await service.get(`/address/selectByUserId/${store.state.userInfo.userID}`).then((res) => {
                // console.log(res);
                this.address = res.data;
            });
            // console.log(this.address);
            if (this.address.length !== 0) {
                await service({
                    method: "get",
                    url: `/address/getDefault/${store.state.userInfo.userID}`,
                    headers: {
                        token: store.state.token,
                    },
                }).then((res) => {
                    if (res.data === null) {
                        this.setDefault(this.address[0]);
                    }
                });
            }
        },
        updateHandler(row) {
            // console.log(row);
            this.isDrawer = true;
            let reg =
                "(?<province>[^省]+自治区|.*?省|.*?行政区|.*?市)(?<city>[^市]+自治州|.*?地区|.*?行政单位|.+盟|市辖区|.*?市|.*?县)(?<county>[^县]+县|.+区|.+市|.+旗|.+海域|.+岛)?(?<town>[^区]+区|.+镇)?(?<village>.*)";
            let region = row.region.match(reg);
            let form = {
                ...row,
                region: [region[1], region[2], region[3]],
            };
            // console.log(form);
            this.updateForm = { ...form };
        },
        closeHandler() {
            this.isDrawer = false;
            this.updateForm = {};
        },
        deleteHandler(row) {
            ElMessageBox.confirm("确认要删除吗？", "警告", {
                confirmButtonText: "确认",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                service({
                    method: "delete",
                    url: `/address/deleteById/${row.addressID}`,
                    headers: {
                        token: store.state.token,
                    },
                }).then((res) => {
                    ElMessage({
                        type: "success",
                        message: "删除成功",
                    });
                    this.refresh();
                });
            });
        },
        // 设为默认地址
        setDefault(row) {
            service
                .post(`/address/setDefault/${row.addressID}/${store.state.userInfo.userID}`)
                .then(() => {
                    ElMessage({
                        type: "success",
                        message: "设为默认地址成功",
                    });
                    this.refresh();
                })
                .catch((err) => {
                    console.log(err);
                });
        },
    },
    async mounted() {
        this.isLoading = true;
        await this.refresh();
        this.isLoading = false;
    },
    components: { AddressForm },
};
</script>

<style lang="scss" scoped>
.manageAddressContainer {
}
</style>
